{% extends 'app/base.html' %}
{% load staticfiles %}

{% block cssinclude %}
    <style>
        .help-block {
            color: red;
        }
    </style>
{% endblock %}


{% block mainbody %}

    <div class="portlet box blue-dark">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-trophy"></i>神经网络-数据预测
            </div>
        </div>

        <div class="portlet-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="portlet box green">
                        <div class="portlet-title">神经网络 参数调整</div>
                        <div class="portlet-body">
                            <table id="SVM">
                                <tr>
                                    <td class="form-label">分类类型</td>
                                    <td>
                                        <select type="text" class="form-control" id="neural_type">
                                            <option value="MLPClassifier" class="selected">MLPClassifier
                                            </option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-label">隐藏层</td>
                                    <td>
                                        <input id="hidden_layer_sizes" type="number" value="100" class="form-control"
                                               min="1">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-label">alpha</td>
                                    <td>
                                        <input id="alpha" type="text" value="0.1" class="form-control">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="form-label">batch_size</td>
                                    <td>
                                        <input id="batch_size" type="text" value="auto" class="form-control">
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <div class="portlet box yellow">
                        <div class="portlet-title">功能区</div>
                        <div class="portlet-body">
                            <input type="file" id="files" style="display: none" onchange="fileImport();">
                            <button type="button" id="fileImport" class="btn">导入</button>
                            <button type="button" id="submit" class="btn btn-blue">提交</button>
                            <button type="button" id="result" class="btn purple">结果</button>
                            <div hidden>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="portlet box blue  col-md-8">
                    <div class="portlet-title">数据输入</div>
                    <div class="portlet-body">
                        <form id="data">
                            <table id="description" class="table tablle-striped">
                                {% for arr in arrs %}
                                    <tr>
                                        <td class="form-label"> {{ arr.cn1 }}</td>
                                        <td><input type="text" id="{{ arr.x1 }}" data="{{ arr.x1 }}" name="{{ arr.x1 }}"
                                                   class="form-control"></td>
                                        <td class="form-label">  {{ arr.cn2 }}</td>
                                        <td><input type="text" id="{{ arr.x2 }}" data="{{ arr.x2 }}" name="{{ arr.x2 }}"
                                                   class="form-control"></td>
                                    </tr>
                                {% endfor %}
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block jsinclude %}
    <script type="text/javascript"
            src="{% static 'assets/global/plugins/jquery-validation/js/jquery.validate.min.js' %}"></script>
    <script type="text/javascript"
            src="{% static 'assets/global/plugins/jquery-validation/js/additional-methods.min.js' %}"></script>
    <script type="text/javascript"
            src="{% static 'assets/global/plugins/jquery-validation/js/localization/messages_zh.min.js' %}"></script>
    <script>
        $(document).ready(function () {
            $('#submit').click(submit)
        });

        submit = function () {
            if (handleValidation().form()) {
                $('#result').html('结果');
                $('#result').addClass('purple');
                $('#result').removeClass('btn-info');
                $('#result').removeClass('btn-danger');

                var nums = [];
                $("#data [data]").each(function (index, element) {
                    nums.push($(element).val())
                });
                var neural_type = $('#neural_type').val();
                var hidden_layer_sizes = $('#hidden_layer_sizes').val();
                var alpha = $('#alpha').val();
                var batch_size = $('#batch_size').val();
                var neural = null;
                if (batch_size === 'auto')
                    neural = "neural_network.{0}(hidden_layer_sizes=({1},), alpha={2}, batch_size='{3}')".format(neural_type, hidden_layer_sizes, alpha, batch_size);
                else
                    neural = "neural_network.{0}(hidden_layer_sizes=({1},), alpha={2}, batch_size={3})".format(neural_type, hidden_layer_sizes, alpha, batch_size);

                ajax({
                    url: '/submit_predict',
                    type: 'POST',
                    data: {
                        nums: nums.join(','),
                        args: neural
                    },
                    success: function (data) {
                        var result = data.final_result;
                        if (result == '破产') {
                            $('#result').html(result);
                            $('#result').removeClass('purple');
                            $('#result').removeClass('btn-info');
                            $('#result').addClass('btn-danger');
                        } else {
                            $('#result').html(result);
                            $('#result').removeClass('purple');
                            $('#result').removeClass('btn-danger');
                            $('#result').addClass('btn-info');
                        }
                    }
                })
            }
        };
        $("#fileImport").click(function () {
            $("#files").click();
        })

        function fileImport() {
            var selectedFile = document.getElementById('files').files[0];
            var reader = new FileReader();
            reader.readAsText(selectedFile);
            reader.onload = function () {
                var result = reader.result.split(' ');
                $("#data [data]").each(function (index, element) {
                    $(element).attr('value', result[index]);
                    console.log(index);
                });
            }
        }

        function handleValidation() {
            var form1 = $('#data');
            var error1 = $('.alert-danger', form1);
            var success1 = $('.alert-success', form1);

            validator = form1.validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block help-block-error', // default input error message class
                focusInvalid: true, // do not focus the last invalid input
                ignore: "",  // validate all fields including form hidden input
                messages: {
                    select_multi: {
                        required: "该字段为必填项",
                        number: "请输入有效的数字"
                    }
                },
                rules: {
            {% for arr in arrs %}
                {{ arr.x1 }}:{
                required: true,
                    number
            :
                true
            },
                {{ arr.x2 }}:{
                required: true,
                    number
            :
                true
            },
            {% endfor %}
        }
        })
            ;
            return validator;
        };
        String.prototype.format = function (args) {
            var result = this;
            if (arguments.length > 0) {
                if (arguments.length == 1 && typeof (args) == "object") {
                    for (var key in args) {
                        if (args[key] != undefined) {
                            var reg = new RegExp("({" + key + "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                }
                else {
                    for (var i = 0; i < arguments.length; i++) {
                        if (arguments[i] != undefined) {
                            var reg = new RegExp("({)" + i + "(})", "g");
                            result = result.replace(reg, arguments[i]);
                        }
                    }
                }
            }
            return result;
        }

        {#csrf标签，防止ajax，post被拦截#}
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });

    </script>
{% endblock %}